<template>
  <div>
    <z-space vertical>
      <zw-row :gutter="40">
        <zw-col :span="8">
          <z-card :header="false">
            <div>这是不带标题的卡片</div>
          </z-card>
          <vue-code-mirror :js="d.js" :tpl="d.tpl"></vue-code-mirror>
        </zw-col>
        <zw-col :span="8">
          <z-card :options="options2">
            <div slot="simple">这是simple基础卡片</div>
          </z-card>
          <vue-code-mirror :js="d2.js" :tpl="d2.tpl"></vue-code-mirror>
        </zw-col>
        <zw-col :span="8">
          <z-card :options="options3">
            <div slot="header">
              <b>标题可以传入DOM元素</b>
            </div>
            <div slot="simple">其他配置项的基础卡片</div>
          </z-card>
          <vue-code-mirror :js="d3.js" :tpl="d3.tpl"></vue-code-mirror>
        </zw-col>
      </zw-row>

      <!--      <h3>依赖</h3>-->
      <!--      <ol>-->
      <!--        <li>-->
      <!--          <el-link href="https://echarts.apache.org/zh/index.html" target="_blank">echarts</el-link>-->
      <!--        </li>-->
      <!--      </ol>-->
      <!--      <h3>使用</h3>-->
      <!--      <vue-code-mirror :js="d.js" :tpl="d.tpl"></vue-code-mirror>-->
      <h3>基础卡片setting参数</h3>
      <doc-props :data="doc.props"></doc-props>
      <h4>options配置</h4>
      <doc-props :data="doc.props2"></doc-props>
      <h4>operate配置</h4>
      <doc-props :data="doc.props3"></doc-props>
    </z-space>
  </div>
</template>

<script>
import VueCodeMirror from "@example/components/VueCodeMirror";
import DocProps from "@example/plugins/example/components/DocProps";

export default {
  components: {
    DocProps,
    VueCodeMirror,
  },
  data() {
    return {
      doc: {
        props: [
          {
            name: 'header',
            type: 'Boolean',
            defVal: 'true',
            desc: '标题是否显示，默认显示（slot="header"可自定义配置标题）',

          },
        ],
        props2: [
          {
            name: 'title',
            type: 'String',
            defVal: '',
            desc: '卡片标题'
          },
          {
            name: 'padding',
            type: 'String',
            defVal: '20px',
            desc: '设置卡片内边距'
          },
          {
            name: 'shadow',
            type: 'String',
            defVal: 'always',
            desc: '设置阴影显示时机',
            selVal: 'always / hover / never'
          },
          {
            name: 'operate',
            type: 'Object',
            defVal: '',
            desc: '配置操作属性',
          },
        ],
        props3: [
          {
            name: 'name',
            type: 'String',
            defVal: '',
            desc: '操作按钮名称'
          },
        ]
      },
      d: {
        tpl: `        <z-card :header="false">
            <div>这是不带标题的卡片</div>
        </z-card>`,
      },
      d2: {
        tpl: `        <z-card :options="options">
            <div slot="simple">这是simple基础卡片</div>
        </z-card>`,
        js: `         data(){
              return {
                 options: {
                  title: "卡片名称",//卡片名称
                  operate: {//是否有操作按钮
                    name: "操作中心",//操作按钮名称
                  }
                }
              }
            }`
      },
      d3: {
        tpl: `        <z-card :options="options">
            <div slot="header">
              <b>标题可以传入DOM元素</b>
            </div>
            <div slot="simple">其他配置项的基础卡片</div>
        </z-card>`,
        js: `         data(){
              return {
                 options: {
                  padding:'30px',//设置卡片内边距
                  //shadow: 'always',//卡片阴影出现的时机
                  shadow: 'hover',// 卡片阴影出现的时机-移入显示
                  //shadow: 'never',// 卡片阴影出现的时机-从不显示
                }
              }
            }`
      },
      options2: {
        title: "卡片名称",
        operate: {
          name: "操作中心"
        }
      },
      options3: {
        padding: '30px',//设置卡片内边距
        // shadow: 'always',// 卡片阴影出现的时机-总是显示
        shadow: 'hover',// 卡片阴影出现的时机-移入显示
        // shadow: 'never',// 卡片阴影出现的时机-从不显示
      }
    }
  },

}
</script>
